<!--
  专家页面组织病理
  lzx
  2020年1月13日
  www
  2020.01.16
-->
<template lang="pug">
  el-container
    el-header.header
      title-bg
    el-container
      //el-aside.nav-layout(width="258px")
        nav-menu
      el-main.main-anchor
        //main-content(modularTitle="图像上传")
        div.main-content-box
          //p.main-content-title image upload
          el-row(:gutter="28")
            el-col(:span="18")
              el-card
                webrtc(
                  :videoHeight="videoHeight"
                  :roomId="roomId"
                  :user-info="userInfo"
                  @join="onJoinUser"
                  @message="onMessage"
                  @imgMessage="onImgMessage"
                  @showBtn="showBtn"
                  ref="webrtc"
                )
            el-col(:span="6")
              el-card.form-card.nav-card
                el-menu(slot="header" mode="horizontal" @select="handleSelect" :default-active="activeIndex").card-title
                  el-menu-item(index="1") 患者信息
                  el-menu-item(index="2") 在线交流
                div.form-box(ref="form" v-show="activeIndex === '1'")
                  el-form(:model="formModel" label-width="120px" size="medium")
                    el-form-item(label="患者姓名：")
                      el-input(v-model="formModel.name" readonly)
                    el-form-item(label="年龄：")
                      el-input(v-model="formModel.age" readonly)
                    el-form-item(label="性别：")
                      el-input(v-model="formModel.sex" disabled)
                    el-form-item(label="申请医师：")
                      el-input(v-model="formModel.doctor" disabled)
                    el-form-item(label="申请时间：")
                      el-input(v-model="formModel.applicationTime" disabled)
                    el-form-item(label="原切片单位：")
                      el-input(v-model="formModel.hospitalName" readonly)
                    el-form-item(label="切片类型：")
                      el-input(v-model="formModel.cname" readonly)
                    el-form-item(label="病理号：")
                      el-input(v-model="formModel.pathologyNum" readonly)
                    el-form-item(label="临床诊断：")
                      el-input(v-model="formModel.diagnosis" readonly)
                    el-form-item(label="肉眼及手术所见：")
                      el-input(v-model="formModel.diagnosisDetail" type="textarea" resize="none" readonly :rows="4")
                div(v-show="activeIndex === '2'")
                  div.chat-box(ref="chatBox")
                    div.chat-list-box
                      div.chat-content(
                        v-for="(item, index) in chatList"
                        :key="index"
                        :class="[{'anchor': item.from.userInfo.identity ==='医生'},{'audience': item.from.userInfo.identity ==='专家' || item.from.userInfo.identity ==='管理专家'}]"
                      )
                        span.person-name 【{{item.from.userInfo.identity}}】 【{{item.from.userInfo.name}}】
                        span(v-if="!item.join") ：
                        span.chat-content {{item.content}}
                        el-card.chat-img-box(v-if="item.imgSrc")
                          img.chat-img(:src="item.imgSrc" @click="showPic(item.imgSrc)")
                        el-dialog(:visible.sync="imgDialogVisible")
                          img(width="100%" :src="dialogImageUrl")
                    el-row(:gutter="10")
                      el-col(:span="17")
                        el-input.chat-input(v-model="chatContent")
                      el-col(:span="4")
                        el-button.send-btn(@click="sendMessage" type="primary") 发送
                        input.img-btn-hidden(
                          type="file"
                          id="id"
                          name="image"
                          class="getImgUrl_file"
                          @change="sendImg($event)"
                          accept="image/jpg,image/jpeg,image/png"
                          ref="imgFile"
                        )
                      el-col(:span="3")
                        el-button(@click="sendPicture" type="primary" icon="el-icon-picture-outline")
              el-card.person-list-box
                // el-popover(placement="top-start" trigger="click" width="250")
                  div.person-popover-box
                    div.person-info-box(v-for="(item, index) in personList" :key="index")
                      img.person-info-avatar(:src="item.userInfo.icon")
                      div.person-info
                        p.person-name {{item.userInfo.name}}
                        p.person-department {{item.userInfo.identity}} | {{item.userInfo.hospital | ellipsis}}
                  div.person-list.float-left(slot="reference")
                    img.person-avatar(v-for="(item, index) in personList" :key="index" :src="item.userInfo.icon")
                div.float-right
                  el-button(size="small" @click="onShareScreen" type="primary" :disabled="startLive" style="margin:0") 开始会诊
                  el-button.invite(size="small" @click="onChooseExpert") 选择专家填写报告
                  el-button.stop-live(size="small" @click="onReport" v-if="report") 打印报告
                  el-button.stop-live(size="small" @click="onLeave" :disabled="stopLive") 停止会诊
                div.clear
    el-dialog(title="请选择要写会诊报告的专家"
      :visible.sync="expertDialogVisible"
      width="30%" :show-close="false" :close-on-press-escape ="false" :close-on-click-modal="false"
      center)
      el-cascader.long(
        v-model="expertVal"
        :options="expertOptions"
      )
      div.dialog-footer(slot="footer")
        el-button(@click="onCancle" type="primary") 取消
        el-button(@click="onSubmit" type="primary") 确认
    div.reportCardsBox(v-if="seen")
      div.reportCards
        div.row(id="pdfDom" ref="pdfDom" style="height: 100%;padding: 20px;box-sizing: border-box;")
          div.reportHead(style="height: 100%;")
            div.reportHeadTitle.borBlack
              img(:src="patientMessage.hospitalLogo" crossorigin="anonymous")
              h1
                span(style="font-family: '楷体';font-size:24px;line-height: 43px;margin-top:3px") {{patientMessage.hospitalNameExpert}}
                span(style="font-family: '宋体';font-size:28px;margin-bottom:8px") 病理会诊报告单
              p.consultation
                span.bold-title 会 诊 号：
                span(style="font-size:16px;font-weight: bold;") {{patientMessage.number}}
            div.patientMessageBox.borBlack.clearfix
              div.patientMessage.w-30
                span.bold-title 姓名：
                span {{patientMessage.name}}
              div.patientMessage.w-40
                span.bold-title 年龄：
                span {{patientMessage.age}}
              div.patientMessage.w-30
                span.bold-title 性别：
                span {{patientMessage.sex}}
              div.patientMessage.w-30
                span.bold-title 申请医师：
                span {{patientMessage.doctor}}
              div.patientMessage.w-40
                span.bold-title 申请单位：
                span {{patientMessage.hospitalName}}
              div.patientMessage.w-30
                span.bold-title 病历号：
                span {{patientMessage.pathologyNum}}
              div.patientMessage.w-30
                span.bold-title 切片类型：
                span {{patientMessage.className}}
              div.patientMessage.w-40
                span.bold-title 临床诊断：
                span {{patientMessage.diagnosis}}
              div.patientMessage.w-30
                span.bold-title 会诊日期：
                span {{this.dates}}
            div.consultMessageBox.borBlack
              h2 光镜所见：
              div.grid
                img.consultImg(v-for="item in imgSrcArr" :class="{ item_1: imgSrcArr.length === 1, item_2: imgSrcArr.length === 2, item_3: imgSrcArr.length === 3, item_4: imgSrcArr.length === 4, item_5: imgSrcArr.length === 5, item_6: imgSrcArr.length > 5}" :src="item" ref="imgArr")
            div.consultMessageBox.borBlack
              h2 会诊意见：
              <!--p.diagnose {{patientMessage.opinion}}-->
              el-input(v-model="patientMessage.opinion" readonly type="textarea" resize="none" :rows="10").elTearea
              img.consultSeal(:src="patientMessage.unitseal")
            div.reportFooter.clearfix
              div.specia.bold-title 会诊医师：
                img.signature(:src="patientMessage.personalseal")
              div.consultTime
                span.bold-title 报告时间：
                span {{patientMessage.applicationTime}}
            div.remark
              span 备注:
              span.remarkTwo 本病理会诊报告基于所借阅切片做出诊断，未参考详细临床病史和大体标本诊断，仅供临床医生和原出片单位病理医生参考。
      div.reportCardsBtnBox
        el-button(type="info" v-print="'#pdfDom'") 下载
          i.el-icon-download.el-icon--right
        el-button(type="info" @click="onSeen") 关闭
          i.el-icon-close.el-icon--right
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import MainContent from '../../components/MainContent'
  import Webrtc from '../../components/webrtc'

  export default {
    components: {
      Webrtc,
      MainContent,
      NavMenu,
      TitleBg
    },
    name: 'anchor',
    data() {
      return {
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        formModel: {}, // 患者信息表单数据
        videoHeight: null, // 视频高度
        personList: [], // 加入直播用户列表--用于显示
        personHistoryList: [], // 加入直播用户列表--历史记录
        activeIndex: '1',
        chatList: [],
        chatContent: '',
        roomId: '',
        userInfo: {
          id: JSON.parse(this.$KalixCatch.get('personaltwo'))[0].id,
          name: JSON.parse(this.$KalixCatch.get('personaltwo'))[0].name,
          identity: JSON.parse(this.$KalixCatch.get('personaltwo'))[0].identity,
          title: JSON.parse(this.$KalixCatch.get('personaltwo'))[0].title,
          icon: JSON.parse(this.$KalixCatch.get('personaltwo'))[0].icon,
          hospital: JSON.parse(this.$KalixCatch.get('personaltwo'))[0].hospital,
          hospitalId: JSON.parse(this.$KalixCatch.get('personaltwo'))[0].hospitalId,
          isShare: 'stop'
        },
        img: null,
        identity: [],
        imgDialogVisible: false,
        dialogImageUrl: '',
        expertDialogVisible: false,
        expertVal: '',
        expertOptions: [],
        stopLive: true,
        startLive: false,
        // isFirst: true
        // patientMessage: {
        //   // 患者信息
        //   name: '', // 姓名
        //   age: '', // 年龄
        //   sex: '男', // 性别
        //   doctor: '', // 申请医师
        //   hospitalName: '', // 申请单位
        //   pathologyNum: '', // 病理号
        //   className: '', // 切片类型
        //   diagnosis: '', // 临床诊断
        //   date: '2020-03-03', // 会诊日期
        //   // 专家信息
        //   hospitalNameExpert: '', // 会诊医院
        //   hospitalLogo: '', // 会诊医院Logo
        //   number: '', // 会诊号
        //   picture: [], // 光镜所见
        //   diagnosisDetail: '', // 会诊诊断'
        //   unitseal: '', // 会诊医院印章
        //   personalseal: '', // 会诊专家签名
        //   applicationTime: '' // 报告时间
        // },
        patientMessage: [],
        dates: '',
        imgSrcArr: [],
        seen: false,
        report: false
      }
    },
    mounted() {
      this.roomId = this.$route.query.patientId + ''
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            // that.videoHeight = that.fullHeight - 220 - 135 + 'px' // 视频高度
            that.videoHeight = that.fullHeight - 154 + 'px' // 视频高度
            that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px' // 患者详情表单高度
            that.$refs.chatBox.style.height = that.fullHeight - 278 - 33 + 'px' // 患者详情表单高度
          })
        })()
      }
      this.$nextTick(() => {
        // that.videoHeight = that.fullHeight - 220 - 135 + 'px' // 视频高度
        that.videoHeight = that.fullHeight - 154 + 'px' // 视频高度
        that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px'// 患者详情表单高度
        that.$refs.chatBox.style.height = that.fullHeight - 278 - 33 + 'px'// 患者详情表单高度
        that.getPatientData()
        that.onOpen()
      })
      // 打印报告页面渲染完成获取相关数据
      // this.getPrintData()
      setTimeout(() => {
        this.getReport()
      }, 500)
    },
    beforeRouteLeave(to, from, next) {
      this.onLeave()
      setTimeout(() => {
        next(true)
      }, 1000)
    },
    // 字符串超出长度显示...
    filters: {
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 10) {
          return value.slice(0, 10) + '...'
        }
        return value
      }
    },
    watch: {
      // 监听屏幕可视区域高度变化
      fullHeight(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的fullHeight值改变，就将其重新赋给data里的fullHeight
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },
    methods: {
      // 病人信息/聊天切换
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
        this.activeIndex = key
      },
      // 创建直播间
      onOpen() {
        this.$refs.webrtc.open()
      },
      // 停止直播
      onLeave() {
        this.$refs.webrtc.leave(this.roomId)
        this.personList.map(item => {
          if (item.userInfo.id === this.userInfo.id) {
            this.personList.splice(item, 1)
            let routeData = this.$router.resolve({ path: '/live/index' })
            window.open(routeData.href, '_self')
          }
        })
        // this.expertDialogVisible = true
        this.stopLive = true
        this.startLive = false
        // this.isFirst = false
      },
      // 返回首页
      onHome() {
        let routeData = this.$router.resolve({ path: '/expertOrg' })
        window.open(routeData.href, '_blank')
      },
      // 接收并显示直播间加入用户
      onJoinUser(personList) {
        console.log('------personList------', personList)
        this.personList = personList
        if (this.personList.length > 1) {
          this.personHistoryList = JSON.parse(JSON.stringify(personList))
          let json = {}
          this.expertOptions = []
          this.personHistoryList.forEach(item => {
            if (item.userInfo.id !== this.userInfo.id) {
              if (!json[item.userInfo.hospitalId]) {
                let arr = []
                arr.push({
                  value: item.userInfo.hospitalId,
                  label: item.userInfo.hospital,
                  children: [{
                    value: item.userInfo.id,
                    label: item.userInfo.name
                  }]
                })
                this.expertOptions.push(...arr)
                json[item.userInfo.hospitalId] = item
              } else {
                this.expertOptions.forEach(value => {
                  // 如果已经存在  就循环新组的值将值插入属性相同的数组里   为了防止重复添加   只要和第一个比较就可以了
                  if (value.value === item.userInfo.hospitalId) {
                    value.children.push({
                      value: item.userInfo.id,
                      label: item.userInfo.name
                    })
                  }
                })
              }
            }
          })
        }
        console.log('expertOptions', this.expertOptions)
      },
      // 接收并显示聊天文字信息
      onMessage(message) {
        console.log(message)
        this.chatList.push(message)
      },
      // 接收并显示聊天图片信息
      onImgMessage(imgMessage, type) {
        this.chatList.push(imgMessage)
      },
      // 屏幕共享
      onShareScreen() {
        this.stopLive = false
        this.startLive = true
        // if (this.isFirst) {
        this.$refs.webrtc.shareScreen()
        // } else {
        //   this.onOpen()
        //   setTimeout(() => {
        //     this.$refs.webrtc.shareScreen()
        //   })
        // }
      },
      // 发送文字信息
      sendMessage() {
        let str = this.chatContent.replace(/(^\s*)|(\s*$)/g, '')
        if (str) {
          let message = {
            from: {
              userInfo: this.userInfo
            },
            content: this.chatContent
          }
          this.$refs.webrtc.sendMessage(message)
          this.chatList.push(message)
          this.chatContent = ''
        }
      },
      // 发送图片信息
      /* eslint-disable */
      sendImg(e) {
        let files = document.getElementById('id').files[0]
        let name = document.getElementById('id').files[0].name
        let arr = name.split('.')
        console.log(arr)
        let fileSize = 0
        let fileMaxSize = 10240//1M
        if (files) {
          fileSize = files.size
          if (fileSize > 10 * 1024 * 1024) {
            alert('文件大小不能大于10M！')
            file.value = ''
            return false
          } else if (fileSize <= 0) {
            alert('文件大小不能为0M！')
            file.value = ''
            return false
          }
        } else {
          return false
        }

        //转码base64
        let reader = new FileReader()
        let imgFile
        let that = this
        reader.readAsDataURL(files)
        reader.onload = e => {
          imgFile = e.target.result
          let imgMessage = {
            from: {
              userInfo: this.userInfo
            },
            imgSrc: imgFile
          }
          that.$refs.webrtc.sendImg(imgMessage)
          this.chatList.push(imgMessage)
        }
        this.$refs.imgFile.value = ''
      },
      // 发送图片按钮调用input获取本体图片功能
      sendPicture() {
        this.$refs.imgFile.dispatchEvent(new MouseEvent('click'))
      },
      // 聊天图片点击放大
      showPic(imgSrc) {
        this.dialogImageUrl = imgSrc
        this.imgDialogVisible = true;
      },
      // 获取当前患者信息
      getPatientData() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/files/getPatient',
          params: {
            patientId: this.$route.query.patientId
          }
        }).then(res => {
          let _data = res.data.data[0]
          console.log('------PatientData------', _data)
          this.formModel = _data
          this.formModel.sex === 1 ? this.formModel.sex = '男' : this.formModel.sex = '女'
        })
      },
      // 选择专家填写报告
      onChooseExpert() {
        this.expertDialogVisible = true
      },
      // 关闭选择打印报告专家弹窗
      onCancle() {
        this.expertDialogVisible = false
        this.$router.go(0)
      },
      // 打印报告的专家弹窗提交
      onSubmit() {
        let date = Date.parse(new Date())
        this.$http.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/reports/deleteOldReport',
          params: {
            fid: this.$route.query.patientId
          }
        }).then(res => {
          this.$http.request({
            method: 'POST',
            url: '/camel/rest/telemedicine/reports',
            data: {
              fid: this.$route.query.patientId,
              expertId: this.expertVal[1],
              date: date,
              hospital: this.expertVal[0]
            }
          }).then(res => {
            this.expertDialogVisible = false
            // this.$router.push({path: '/live/index'})
          })
        })
        this.report = true
      },
      // 录制标识是否显示
      showBtn() {
        this.stopLive = true
        this.startLive = false
      },
      // 打印报告
      getBase64Imgs(img) {
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
        let imgUrl = canvas.toDataURL('image/' + ext)
        return imgUrl
      },
      getPrintData(res) {
        // let printData = JSON.parse(this.$route.query.reportData)
        let printData = res
        console.log('222222222222222222222222222222222', printData)
        let imgArr = []
        imgArr.push(printData.hospitalLogo)
        imgArr.push(printData.picture)
        imgArr.push(printData.unitseal)
        imgArr.push(printData.personalseal)
        // imgArr.forEach((item, i) => {
        let image = new Image()
        image.crossOrigin = ''
        image.src = printData.hospitalLogo
        image.onload = () => {
          printData.hospitalLogo = this.getBase64Imgs(image)
          // let img1 = new Image()
          // img1.crossOrigin = ''
          // img1.src = printData.picture
          // img1.onload = () => {
          //   console.log('img1', img1)
          //   printData.picture = this.getBase64Imgs(img1)
          let img2 = new Image()
          img2.crossOrigin = ''
          img2.src = printData.unitseal
          img2.onload = () => {
            printData.unitseal = this.getBase64Imgs(img2)
            let img3 = new Image()
            img3.crossOrigin = ''
            img3.src = printData.personalseal
            img3.onload = () => {
              printData.personalseal = this.getBase64Imgs(img3)
              this.patientMessage = printData
              let imgArrar = printData.picture.split(',')
              if (printData.sex === '1') {
                this.patientMessage.sex = '男'
              } else {
                this.patientMessage.sex = '女'
              }
              // return new Promise((resolve, reject) => {
              for (var i = 0; i < imgArrar.length; i++) {
                let img = new Image()
                img.crossOrigin = ''
                img.src = imgArrar[i]
                img.onload = () => {
                  let imgsrc = this.getBase64Imgs(img)
                  this.imgSrcArr.push(imgsrc)
                }
              }
            }
          }
        }
      },
      // 打印报告弹出
      onReport(){
        this.seen = true
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/getReportFidAll',
          params: {
            fid: this.$route.query.patientId
            // fid: 1001659
          }
        }).then(res => {
          this.patientMessage=res.data.data[0]
          this.dates = res.data.data[0].date.substring(0,10)
          this.getPrintData(res.data.data[0])
          // this.expertDialogVisible = false
            // this.$router.push({path: '/live/index'})
          })
      },
      // 点击关闭关闭弹出框
      onSeen(){
        this.seen = false
      },
    }
  }
</script>

<style scoped lang="stylus">
  .el-button+.el-button
    margin-left 8px

  .header
    padding 0

  .nav-layout
    position relative
    height 100%

  .main-anchor
    margin-left 27px
    padding 0

    .main-content-box
      padding-right 27px
      margin-top 0
      overflow-y auto
      overflow-x hidden

      .main-content-title
        color #a2c8f8
        font-size 14px

      .el-card
        margin-top 25px

        .card-title
          font-size 16px

      .person-list-box
        margin-top 25px
        cursor pointer

        .person-list
          .person-avatar
            width 30px
            height 30px
            border-radius 50%
            display inline-block
            vertical-align middle
            margin 0 5px

      .stop-live
        background-color #6861ce
        color #fff

      .stop-live:hover
        opacity 0.8

  .form-card
    .el-form-item
      margin-bottom 13px

  .person-popover-box
    .person-info-box
      margin 5px 0

      .person-info-avatar
        width 46px
        height 46px
        display inline-block
        vertical-align middle

      .person-info
        display inline-block
        vertical-align middle
        margin-left 10px

        .person-name
          font-size 18px
          color #575962

        .person-department
          font-size 14px
          color #bbbbbb

  .chat-img-box
    display inline-block
    vertical-align top
    margin-top 0 !important
    cursor pointer

  .chat-img
    vertical-align top
    display inline-block
    max-height 100px
    max-width 200px

  .img-btn-hidden
    display none

  .chat-list-box
    width 100%
    padding 15px
    height 90%
    border 3px solid #1269db
    border-radius 8px
    margin-bottom 20px
    box-sizing border-box
    overflow auto
    font-size 14px

  .anchor
    color blue

  .audience
    color #ffa315

  .send-btn
    width 100%

  .long
    width 100%

  .form-box
    overflow auto

  .invite
    background-color #1a2035
    color #fff

  // 打印报告样式
  .clearfix
    zoom 1

  .clearfix:after
    clear both
    display block
    visibility hidden
    height 0
    line-height 0
    content ''

  .reportCardsBox
    width 100%
    height 100%
    background rgba(0,0,0,.6)
    position absolute
    .reportCards
      background-color: #fff
      width 780px
      height 100%
      margin 0 auto
      -webkit-box-sizing border-box
      box-sizing border-box
  .borBlack
    border-bottom 2px solid #000
    font-family '宋体'

  .reportHeadTitle
    position relative
    img
      width 94px
      height auto
      display block
      position absolute
      margin-left 6%
    h1 span
      display block
      text-align center
      font-size 20px
    .consultation
      font-size 14px
      text-align right
      margin 0 6% 6px 6%
      font-family '宋体'
    .reportCardsBtnBox
      position absolute
      top 30px
      right 100px
  .patientMessage
    padding-left 1%
    box-sizing border-box
    font-size 14px
    line-height 30px

  .w-30
    width 28%
    float left

  .w-40
    width 44%
    float left

  .consultMessageBox
    padding 10px 0
    height 30%
    position relative

  .grid /*display grid
    grid-template-columns repeat(auto-fill, 80px)*/
    /*text-align center*/
    /*flex-wrap wrap*/
    text-align center
    height 90%
    margin-top 2%
  .consultImg
    /*max-width 200px*/
    margin 10px

  .item_1
    /*height 200px*/
    width 252px

  .item_2
    /*height 200px*/
    width 252px

  .item_3
    /*height 135px*/
    width 170px
    margin 6% 5px

  .item_4
    /*height 105px*/
    width 132px
    margin 6% 5px

  .item_5
    width 120px
    height 150px
    margin 5px 5px
    background-size cover

  .item_6
    width 80px
    height 80px
    margin 5px 5px
    background-size cover

  .consultMessageBox h2
    font-size 16px
    margin-left 1%

  .diagnose
    padding 10px 30px
    font-size 14px
    line-height 24px
    height 160px
    text-indent 2em

  .consultSeal
    width 140px
    position absolute
    bottom 10px
    right 30px

  .reportFooter .specia
    float left
    line-height 50px
    font-size 14px
    margin-left 30px
    font-family '宋体'

  .reportFooter .specia .signature
    height 70px
    display inline-block

  .reportFooter .consultTime
    float right
    line-height 50px
    font-size 14px
    margin-right 30px
    font-family '宋体'

  .reportCardsBtnBox
    position absolute
    top 30px
    right 100px

  .remark
    width 500px
    margin 10px auto 0 auto

    span
      display inline-block
      vertical-align top

    .remarkTwo
      width 440px
      margin-left 6px

  .bold-title
    font-weight bold

</style>
<style lang="stylus">
  // 打印报告
  .consultMessageBox .el-textarea__inner, textarea
    border none
    height 96%
    line-height 1.7
    padding-left 80px
    overflow hidden
    color #000

  .consultMessageBox .el-textarea
    height 90%
</style>
